
<!DOCTYPE html>
<html>
<head>
	<title>Leaflet easyPrint plugin Demo</title>
	<meta charset="utf-8" />

	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
	<link href='https://fonts.googleapis.com/css?family=Lato:900,300' rel='stylesheet' type='text/css'>
	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
	
	<style>
		html {background: #222222; padding: 40px 200px;font-family: 'Lato', sans-serif;}
		h2,p {color: white;}
		.gitButton{
			padding:15px 30px;
			background-color: #47a230;
			text-decoration: none;
			font-weight: 900;
			color: white;
			text-transform:uppercase;
			transition: background-color .5s;
			border: none;
    		border-radius: 2px;
    		cursor: pointer;
		}
		.gitButton:hover {background-color: #1d7806}
		.gitButton:visited {color: white;}
		.manualButton {
			padding:15px 30px;
			background-color: #308ba2;
			margin-left: 40px;
			text-decoration: none;
			font-weight: 900;
			color: white;
			text-transform:uppercase;
			transition: background-color .5s;
			border: none;
    		border-radius: 2px;			
    		cursor: pointer;
		}
	</style>


</head>

<body class="easyPrint">
	<h2>Welcome to the Leaflet easyPrint demo</h2>
	<p>All this text will be hidden when I print my map.</p>
	<div id="map" style="height:400px; width:900px"></div>
	<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>

	<script src="dist/bundle.js"></script>

	<script>

		var map = L.map('map').setView([51.505, -0.09], 13);

		var tiles = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}.png', {
			maxZoom: 18,
			attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
		}).addTo(map);

		L.marker([51.5, -0.09]).addTo(map)
		.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();

		L.circle([51.508, -0.11], 500, {
			color: 'red',
			fillColor: '#f03',
			fillOpacity: 0.5
		}).addTo(map).bindPopup("I am a circle.");

		L.polygon([
			[51.509, -0.08],
			[51.503, -0.06],
			[51.51, -0.047]
			]).addTo(map).bindPopup("I am a polygon.");


		var popup = L.popup();


		var printer = L.easyPrint({
      		tileLayer: tiles,
      		sizeModes: ['Current', 'A4Landscape', 'A4Portrait'],
      		filename: 'myMap',
      		exportOnly: true,
      		hideControlContainer: true
		}).addTo(map);

		function manualPrint () {
			printer.printMap('CurrentSize', 'MyManualPrint')
		}

	</script>
	<p class="testing">So will this boring sentence.</p>
	<br><br>
	<a href="https://github.com/rowanwins/leaflet-easyPrint"><button class="gitButton"><i class="fa fa-github fa-lg"></i>&nbsp;&nbsp;  Download me on github</button></a>
	<button class="manualButton" onclick="manualPrint()">Manual print</button>

</body>

</html>
